import React from 'react';
import { Box, Grid, GridItem, makeToast, Text, ThemeColorType } from '@nova-hf/ui';
import { useTranslation } from 'beta/utils/i18n';
import { useSettingsBetaQuery, useUpdateSettingBetaMutation } from 'typings/graphql';

import { StillingarLoader } from '../components/StillingarLoader';
import { ToggleSetting } from '../components/ToggleSetting';

type GeneralSettingsContainerProps = {
  subscriptionId: string;
  color: ThemeColorType;
};

const GeneralSettingsContainer = ({ subscriptionId, color }: GeneralSettingsContainerProps) => {
  const { t } = useTranslation('stillingar');
  const [toggleSetting] = useUpdateSettingBetaMutation();
  const { data, loading, error, refetch } = useSettingsBetaQuery({
    variables: {
      input: {
        subscriptionId: subscriptionId ?? '',
      },
    },
  });

  const settings = data?.subscription?.settings;

  const onToggle = async (id: string, onOff: boolean) => {
    try {
      await toggleSetting({
        variables: {
          input: {
            on: !onOff,
            settingId: id,
            subscriptionId: subscriptionId,
          },
        },
      });
      refetch();
    } catch (error) {
      if (error instanceof Error) {
        makeToast.danger(t('generalSettings.updateSettingsError'), error.message);
      }
    }
  };

  if (!data || error) return null;
  if (loading) return <StillingarLoader />;

  return (
    <Box>
      {settings
        ?.filter(
          (s) =>
            s.settingId !== 'ENABLESMSALERTWHENDATALOW' &&
            s.settingId !== 'INTERNETABROAD' &&
            s.settingId !== 'FOREIGNROAMING' &&
            s.settingId !== 'ENABLE_UPSELL_MOBILE_DATA' &&
            s.settingId !== 'ROAMINGGPRS' &&
            s.settingId !== 'ROAMINGZONE35' &&
            s.settingId !== 'FERDAPAKKI',
        )
        .map((setting) => (
          <Box key={setting.settingId} display="flex" flexDirection="column" marginBottom={6}>
            <Grid gridTemplate={{ sm: 6, lg: 2 }} columnGap={{ sm: 3, lg: 2 }} alignItems="center">
              <GridItem gridColumn={{ sm: 'span6', lg: 'span1', xl: 'span1' }}>
                <Text variant="pMediumBold">{setting.title}</Text>
                <Text variant="pMediumRegular">{setting.statusText}</Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span6', lg: 'span1', xl: 'span1' }}>
                <Box display="flex" width="100%" justifyContent="flex-end">
                  <ToggleSetting
                    onOff={setting.on}
                    onToggle={() => onToggle(setting.settingId, setting.on)}
                    color={color}
                  />
                </Box>
              </GridItem>
            </Grid>
          </Box>
        ))}
    </Box>
  );
};

export default GeneralSettingsContainer;